<template>
  <div class="timeline-control">
    <div class="controls">
      <el-select v-model.number="speed" @change="updateSpeed" style="width: 100px;">
        <el-option v-for="s in speeds" :key="s" :value="s" :label="s + 'x'">{{ s }}x</el-option>
      </el-select>
      <el-button @click="play">{{ playing ? '暂停' : '播放' }}</el-button>
      <el-button @click="rewind">{{ playing ? '停止' : '快退' }}</el-button>
      <el-button @click="fastForward">{{ playing ? '停止' : '快进' }}</el-button>
    </div>
    <div class="timeline-container">
      <input type="range" min="0" :max="duration" v-model.number="currentTime" @input="updateTime"
        class="timeline-slider" />
      <div class="timeline-labels">
        <span>{{ formatTime(startTime) }}</span>
        <span>{{ formatTime(currentTime) }}</span>
        <span>{{ formatTime(endTime) }}</span>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted, watch } from 'vue';

export default defineComponent({
  name: 'TimelineControl',
  props: {
    startTime: {
      type: Number,
      required: true,
    },
    endTime: {
      type: Number,
      required: true,
    },
    initialTime: {
      type: Number,
      required: true,
    },
    duration: {
      type: Number,
      required: true,
    },
    speeds: {
      type: Array as () => number[],
      default: () => [0.5, 1, 2, 4],
    },
  },
  setup(props) {
    const currentTime = ref(props.initialTime);
    const speed = ref(1);
    const interval = ref<number | null>(null);
    const playing = ref(false);

    const formatTime = (seconds: number): string => {
      const date = new Date(seconds * 1000);
      const hours = String(date.getUTCHours()).padStart(2, '0');
      const minutes = String(date.getUTCMinutes()).padStart(2, '0');
      const secondsStr = String(date.getUTCSeconds()).padStart(2, '0');
      return `${hours}:${minutes}:${secondsStr}`;
    };

    const updateTime = (event: Event) => {
      const input = event.target as HTMLInputElement;
      currentTime.value = parseFloat(input.value);
      // 发出自定义事件或调用方法以更新OpenLayers地图/图层时间
      // this.$emit('time-updated', currentTime.value);  
    };

    const play = () => {
      if (playing.value) {
        clearInterval(interval.value!);
        interval.value = null;
      } else {
        const step = 1000 / speed.value;
        interval.value = window.setInterval(() => {
          currentTime.value = (currentTime.value + step) % props.duration;
          // 发出自定义事件或调用方法以更新OpenLayers地图/图层时间
          // this.$emit('time-updated', currentTime.value);  
        }, step);
      }
      playing.value = !playing.value;
    };

    const rewind = () => {
      clearInterval(interval.value!);
      interval.value = null;
      currentTime.value = props.startTime;
      playing.value = false;
      // 发出自定义事件或调用方法以更新OpenLayers地图/图层时间
      // this.$emit('time-updated', currentTime.value);  
    };

    const fastForward = () => {
      clearInterval(interval.value!);
      interval.value = null;
      currentTime.value = props.endTime;
      playing.value = false;
      // 发出自定义事件或调用方法以更新OpenLayers地图/图层时间
      // this.$emit('time-updated', currentTime.value);  
    };

    const updateSpeed = () => {
      if (interval.value !== null) {
        clearInterval(interval.value);
        play(); // 以新的速度重新开始
      }
    };

    onMounted(() => {
      // 使用初始时间初始化OpenLayers映射/层 
      // Example: map.getView().setAnimationDuration(currentTime.value);  
    });

    watch(() => currentTime.value, (newValue) => {
      // Optionally, update OpenLayers map/layer with new time  
      // Example: map.getView().setCenter(new ol.geom.Point(center).transform('EPSG:4326', map.getView().getProjection()));  
    });

    return {
      currentTime,
      speed,
      playing,
      formatTime,
      updateTime,
      play,
      rewind,
      fastForward,
      updateSpeed,
    };
  },
});
</script>

<style scoped>
.timeline-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 600px;
  box-sizing: border-box;
  border-radius: 3px;
  padding: 0.5%;
  color: #fff;
}

.timeline-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-bottom: 10px;
}

.timeline-slider {
  width: 100%;
}

.timeline-labels {
  position: absolute;
  top: 120%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.controls {
  display: flex;
  /* flex-direction: column;   */
  align-items: center;
  justify-content: end;
  width: 100%;
}

.controls select,
.controls button {
  margin: 5px;
}
</style>